import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'

import { getLoginApi } from "../../api/axios.js";

// 导入withFormik
import { withFormik, Form, Field, ErrorMessage } from 'formik'

// 导入Yup
import * as Yup from 'yup'


// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
    render() {
        return (
            <div className={styles.root}>
                {/* 顶部导航 */}
                <NavHeader className={styles.navHeader}>账号登录</NavHeader>
                <WhiteSpace size="xl" />

                {/* 登录表单 */}
                <WingBlank>
                    <Form>
                        {/* 账号 */}
                        <div className={styles.formItem}>
                            <Field
                                className={styles.input}
                                name="username"
                                placeholder="请输入账号"
                            />
                        </div>
                        <ErrorMessage
                            className={styles.error}
                            name="username"
                            component="div"
                        />
                        {/* 密码 */}
                        <div className={styles.formItem}>
                            <Field
                                className={styles.input}
                                name="password"
                                type="password"
                                placeholder="请输入密码"
                            />
                        </div>
                        <ErrorMessage
                            className={styles.error}
                            name="password"
                            component="div"
                        />
                        <div className={styles.formSubmit}>
                            <button className={styles.submit} type="submit">
                                登 录
                </button>
                        </div>
                    </Form>
                    <Flex className={styles.backHome}>
                        <Flex.Item>
                            <Link to="/registe">还没有账号，去注册~</Link>
                        </Flex.Item>
                    </Flex>
                </WingBlank>
            </div>
        )
    }
}
// 使用 withFormik 高阶组件包装 Login 组件，为 Login 组件提供属性和方法
Login = withFormik({
    // 提供状态：
    mapPropsToValues: () => ({ username: "", password: "" }),
    // 表单检验
    // 添加表单校验规则
    validationSchema: Yup.object().shape({
        username: Yup.string()
            .required('账号为必填项')
            .matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
        password: Yup.string()
            .required('密码为必填项')
            .matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')
    }),
    // 表单提交事件
    // 注意：无法在该方法中，通过 this 来获取到路由信息
    // 所以，需要通过 第二个对象参数中获取到 props 来使用 props
    handleSubmit: async (values, { props }) => {
        // 实现登录
        const res = await getLoginApi(values)
        console.log(res, 'login');
        const { status, body, description } = res.data
        if (status === 200) {
            // 登录成功
            localStorage.setItem('hkzf_token', body.token)

            // 注意：无法在该方法中，通过 this 来获取到路由信息
            // 所以，需要通过 第二个对象参数中获取到 props 来使用 props
            props.history.go(-1)
        } else {
            // 登录失败
            Toast.info(description, 2, null, false)
        }
    },
    displayName: 'LoginForm',
})(Login)
// 注意：此处返回的是 高阶组件 包装后的组件
export default Login






